<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

    <div id="root">
        {{msg}}
        <input v-model="msg">
    </div>
    <script>
        var root = new Vue({
            el: "#root",
            data: {
                msg: "123"
            },
            beforeCreate:function () {
                console.log("控制台打印:beforeCreate")
            },
            created:function () {
                console.log("控制台打印:created")
            },
            beforeMount:function () {
                //页面还未被渲染
                console.log(this.$el),
                    console.log("控制台打印:beforeMount")
            },
            mounted:function () {
                //页面渲染完成
                console.log(this.$el),
                    console.log("控制台打印：mounted")
            },
            beforeUpdate:function () {
                console.log("控制台打印：beforeUpdate")
            },
            updated:function () {
                console.log("控制台打印：updated")
            },
            beforeDestroy:function () {
                console.log("控制台打印：beforeDestory")
            },
            destroyed:function () {
                console.log("控制台打印：destroyed")
            }
        })
    </script>



</body>
</html>
